//Colors
$gray-base:              #5e696d;
$gray-dark:              #364347;
$gray:                   #93a4aa;
$gray-light:             #b2c6cd;
$gray-lighter:           #d6e1e5;

$light:                  #f4f4f4;
$white:                  #ffffff;

$brand:                  #9e0001;
$brand-yellow:           #f59744;
$brand-blue:             #145383;
$brand-green:            #009900;

$body-bg:                #fff;
$module-padding:         20px;
$module-margin:          $module-padding;
$success-color:          #04be02;
$text-color:             $gray-dark;
$link-color:             $gray-base;
$link-hover-color:       $brand;

//Typography
$font-family-sans-serif:  "Tahoma","Helvetica Neue","Lantinghei SC",Arial,"Microsoft Yahei","Hiragino Sans GB",STXihei,Helvetica,sans-serif;
$font-family-monospace:   Menlo, Monaco, Consolas, "Courier New", monospace;
$font-family-num:         Impact;
$font-family-more:        "Hiragino Sans GB","SimSun";
$font-family-base:        $font-family-sans-serif;

$font-size-base:          14px;
$font-size-large:         ceil(($font-size-base * 1.1));// ~16px;
$font-size-small:         ceil(($font-size-base * 0.85));// ~12px

$font-size-h1:            floor(($font-size-base * 2.6)); // ~36px
$font-size-h2:            floor(($font-size-base * 2.15)); // ~30px
$font-size-h3:            ceil(($font-size-base * 1.7)); // ~24px
$font-size-h4:            ceil(($font-size-base * 1.25)); // ~18px
$font-size-h5:            $font-size-base;
$font-size-h6:            ceil(($font-size-base * 0.85)); // ~12px

$line-height-base:        1.428571429; // 20/14
$line-height-large:       28px;
$line-height-computed:    floor(($font-size-base * $line-height-base)); // ~20px

//z-index
$nav-mobile-zindex:       1000;

//Icon
$icon-font-path:          "../../fonts/";
$icon-font-name:          "iconfont";
$icon-font-svg-id:        $icon-font-name;

//Components
$padding-base-vertical:     6px;
$padding-base-horizontal:   12px;

$padding-large-vertical:    10px;
$padding-large-horizontal:  15px;

$padding-small-vertical:    5px;
$padding-small-horizontal:  10px;

$border-radius-base:        4px;
$border-radius-large:       6px;
$border-radius-small:       3px;

$component-active-color:    #fff;

$body-width:                1000px;
$index-section-width:       680px;
$index-aside-width:         320px;

//Buttons
$btn-font-weight:           normal;
$btn-default-color:         $link-color;
$btn-default-bg:            transparent;
$btn-default-border:        #ccc;

$btn-red-color:             #fff;
$btn-red-bg:                $brand;
$btn-red-border:            $brand;

$btn-blue-color:            #fff;
$btn-blue-bg:               $brand-blue;
$btn-blue-border:           $brand-blue;

$btn-yellow-color:            #fff;
$btn-yellow-bg:               $brand-yellow;
$btn-yellow-border:           $brand-yellow;

//Table
$table-bg:                      transparent;
$table-cell-padding:            8px;
$table-condensed-cell-padding:  5px;
$table-bg-accent:               #f9f9f9;
$table-bg-hover:                #fafafa;
$table-td-border-color:         #f4f4f4;
$table-bg-active:               $table-bg-hover;
$table-border-color:            $gray-lighter;

//Forms
$input-bg:                  #fff;
$input-color:               $gray-base;
$input-border:              $gray-lighter;
$input-border-radius:       $border-radius-base;
//** Border color for inputs on focus
$input-border-focus:        $brand;
//** Placeholder text color
$input-color-placeholder:   $gray-light;
$input-bg-disabled:         $gray-lighter;
$cursor-disabled:           not-allowed;
$input-height-base:         ($line-height-computed + ($padding-small-vertical * 2));

$legend-color:              $gray-dark;
$legend-border-color:       #e5e5e5;


//Topbar
$topbar-height:             34px;
$topbar-line-height:        $topbar-height;

//Nav
$nav-height:                44px;
$nav-line-height:           $nav-height;

//Office
$office-height:             275px;
$office-title-width:        135px;
$office-tab-width:          543px;
$office-border-color:       #eee;
$office-list-padding:       8px 0;
$office-label:              70px;
$office-form:               $office-tab-width - $padding-large-horizontal * 2 - $office-label;

//Server
$server-wrapper-width:      700px;
$server-item-width:         155px;
$server-border-color:       $gray-lighter;
$server-dt-padding:         8px 25px;

//Filter
$filter-type-padding:       15px 0;
$filter-title-padding:      1px 0;
$filter-option-padding:     1px 5px;

//openness
$state-open:              $brand-green;
$state-warning:           $brand-yellow;
$state-close:             $gray-base;

//Pagination
$pagination-margin:       5px;
$pagination-border-color: $gray-lighter;
$disabled-border-color:   $light;
$disabled-background:     transparent;
$disabled-color:          $gray;

//credit
$credit-bg:               #fafafa;
$credit-input-width:      $index-section-width;
$credit-input-height:     40px;
$credit-input-lineheight: $credit-input-height;
$credit-btn-padding:      20px;
$credit-label:            70px;
$credit-form:             200px;

//panel
$panel-border-color:      $gray-lighter;
$panel-border-radius:     $border-radius-base;
$padel-heading-font:      $font-size-base + 1;  // ~15px;
$panel-padding:           $padding-base-vertical $padding-base-horizontal;

//label
$label-bg:                $light;
$label-padding:           2px 5px;
$label-border-radius:     $border-radius-base;

//$interaction
$interaction-aside-width:   300px;
$interaction-section-width: 700px;
$submenu-title-padding:     10px $padding-base-horizontal;
$submenu-title-color:       $brand-blue;
$submenu-link-hover-bg:     #fafafa;
$submenu-link-active:       $submenu-title-color;
$letter-heading-bg:         $light;

//article
$article-title-padding:     15px;
$article-info-padding:      $article-title-padding;
$article-info-margin:       20px;
$article-info-color:        $gray;

$article-paragraph-margin:  15px;
$article-color:             $gray-dark;
$article-font-size:         $font-size-large;
$article-line-height:       30px;

$desc-line-height:          26px;
$desc-info-color:           $article-info-color;
$desc-font-size:            $font-size-base;

$subtitle-bg:               #fafafa;
$subtitle-font-size:        $article-font-size;
$subtitle-border-color:     $light;
$subtitle-border-left:      $brand-blue;
$subtitle-color:            $gray;

$feedback-font-size:        $article-font-size;
$feedback-color:            $article-color;

//pager
$pager-bg:                  transparent;
$pager-border:              $pagination-border-color;
$pager-border-radius:       15px;
$pager-hover-bg:            $brand;
$pager-active-bg:           $pager-hover-bg;
$pager-active-color:        $white;
$pager-disabled-color:      $disabled-color;

//hall
$hall-search-width:         586px;
$hall-search-height:        40px;
$hall-search-font-size:     $font-size-large;
$hall-search-button-padding:30px;
$application-margin:        $padding-large-horizontal;
$application-width:         ($index-section-width - $padding-large-horizontal * 2) / 2 - 2;
$application-tab-padding:   10px 30px;

$hallhelp-bg:               lighten($brand-yellow, 33%);
$hallhelp-border:           $hallhelp-bg;

$hall-list-btn-padding:     1px 5px;
$hall-table-th-bg:          $hallhelp-bg;
$hall-table-border:         #f4f4f4;
$hall-table-padding:        10px;


// Open Map
$header-page-height:        50px;
$nav-page-padding:          0 100px;
$nav-page-font:             $font-size-large;
$nav-page-height:           $header-page-height;
$nav-page-line-height:      $nav-page-height;
$aside-width:               370px;
$aside-top:                 $header-page-height + 30px;
$aside-filter-bg:           #f5f5f5;
$aside-filter-padding:      15px;
$aside-search-width:        270px;
$aside-search-border:       #ddd;
$aside-select-width:        160px;

// Reserve
$reserve-title-bg:          lighten($brand-yellow, 33%);
$reserve-title-padding:     15px 10px;
$reserve-label:             150px;
$reserve-form:              400px;

// Datepicker
$dropdown-border:           rgba(0,0,0,.15);
$dropdown-bg:               #fff;
$btn-link-disabled-color:   $gray-light;
$state-info-bg:             #d9edf7;

// Media queries breakpoints form bootstrap

//** Extra small screen / phone
$screen-phone:              480px;

//** Small screen / tablet
$screen-tablet:             768px;

//** Medium screen / desktop
$screen-desktop:            992px;

//** Large screen / wide desktop
$screen-lg-desktop:         1200px;

$screen-phone-max:          ($screen-tablet - 1);
$screen-tablet-max:         ($screen-desktop - 1);
$screen-desktop-max:        ($screen-lg-desktop - 1);


// Mobile
$navbar-height:             44px;
$nav-control-height:        $navbar-height;
$nav-control-width:         $nav-control-height;